<script setup lang="ts">
import type { VxeGridProps } from '#/adapter/vxe-table';
import {requestClient} from "#/api/request";
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import {Page, useVbenModal} from '@vben/common-ui'
import { useVbenForm } from '#/adapter/form';
import {form_schema, table_columns} from "#/views/toc/app/data";
import {ElImage} from "element-plus";

const gridOptions:VxeGridProps={
  height:'100%',
  checkboxConfig: {
    highlight: true,
    labelField: 'name',
  },
  exportConfig:{},
  keepSource: true,
  proxyConfig: {
    ajax: {
      query: async ({ page }) => {
        return await requestClient.post('/platform/app/page',{
          params:{...page}
        })
      },
    },
  },
  toolbarConfig: {
    custom: true,
    export: true,
    // import: true,
    refresh: true,
    zoom: true,
  },
  columns:table_columns
}
const [Grid, gridApi] = useVbenVxeGrid({
  gridOptions,
});
const [BaseForm,formApi] = useVbenForm({
  commonConfig: {
    componentProps: {
      class: 'w-full',
    },
  },
  showDefaultActions: false,
  layout: 'vertical',
  schema:form_schema
})
const [Modal, modalApi] = useVbenModal({
  destroyOnClose: true,
  onConfirm: async () => {
    const { valid } = await formApi.validate();
    if (!valid) {
      return;
    }
    modalApi.lock();
    const data = await formApi.getValues();
    if(data.id){
      await requestClient.put('/platform/app/update', data)
    }else {
      await requestClient.post('/platform/app/create',data)
    }
    //处理提交
    await modalApi.close();
    await gridApi.reload();
  }
});
const edit=async (row:any) => {
  await modalApi.open()
  await formApi.setValues(row,false)
}
</script>

<template>
  <Page auto-content-height>
    <Grid>
      <template #toolbar-tools>
        <el-button type="primary" @click="modalApi.open()">新增</el-button>
      </template>
      <template #option="{row}">
        <el-button type="primary" link @click="edit(row)">修改</el-button>
      </template>
      <template #appIcon="{row}">
        <div v-if="row.appIcon" style="width:100%;height:40px;">
          <el-image style="width:100%;height:100%" :src="row.appIcon" fit="scale-down"/>
        </div>
      </template>
    </Grid>
    <Modal>
      <BaseForm/>
    </Modal>
  </Page>
</template>

<style scoped lang="scss">

</style>
